<template>
  <div style="padding: 20px">
    <Alert message="穿梭框组件示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
      <template #description>
        <div>组件属性：</div>
        <div>show-search: 是否显示搜索框</div>
        <div>listStyle: 两个穿梭框的自定义样式</div>
        <div>titles: 标题集合，顺序从左至右 </div>
      </template>
    </Alert>
    <div class="demoTittle">带搜索的穿梭框</div>

    <a-transfer
      v-model:target-keys="targetKeys"
      :data-source="mockData"
      show-search
      :locale="locale"
      :listStyle="{ maxWidth: '400px', height: '400px' }"
      :titles="['联系人', '联系人']"
      :filter-option="filterOption"
      :render="(item) => item.title"
      @change="handleChange"
      @search="handleSearch"
    >
      <template #children="{ filteredItems }">
        <div class="emptyTransfer" v-if="filteredItems.length == 0">
          <a-empty :image="emptyone" description="暂无数据" />
        </div>
      </template>
    </a-transfer>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import emptyone from '@/assets/images/emptyone.jpg';

  interface MockData {
    key: string;
    title: string;
    description: string;
    chosen: boolean;
  }
  const mockData = ref<MockData[]>([] as any);

  const locale = {
    itemUnit: '个',
    itemsUnit: '个',
    searchPlaceholder: '请输入搜索内容',
  };

  const targetKeys = ref<string[]>([]);
  onMounted(() => {
    getMock();
  });
  const getMock = () => {
    const keys = [] as any;
    const mData = [] as any;
    for (let i = 0; i < 20; i++) {
      const data = {
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
        chosen: Math.random() * 2 > 1,
      };
      if (data.chosen) {
        keys.push(data.key);
      }
      mData.push(data);
    }
    mockData.value = mData;
    targetKeys.value = keys;
  };
  const filterOption = (inputValue: string, option: MockData) => {
    return option.description.indexOf(inputValue) > -1;
  };
  const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
    console.log(keys, direction, moveKeys);
  };

  const handleSearch = (dir: string, value: string) => {
    console.log('search:', dir, value);
  };
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
  }
  .marginBtm18 {
    margin-bottom: 18px;
  }
  .color666666 {
    color: #666666;
  }

  //空状态
  .emptyTransfer {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(
      .ant-transfer
        .ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover
    ) {
    background-color: #f2f6fc;
  }
</style>
